CSS3 ANIMATION
In transition, we have seen the change from one state to another. However, it doesn't fit the bill when it comes to multiple states. Hence, the animation feature is used for this purpose.
@keyframes
The points at which the transition should take place can be defined using the
@keyframes property. As of now, we need to add a vendor prefix to the @keyframes property as it is still in its development state. In future, when it is accepted as a standard, then we do not have to use a vendor prefix. We can use percentage or from and to keywords to implement the change in state from one CSS style to another.
animation-name
We need to apply animation to an element. The animation-name property enables us to do so, by applying it to the animation name defined in the keyframes rule.
However, it cannot be a standalone property and has to be used in conjunction with other animation properties.
animation-duration
Using the animation-duration feature, we can define the duration of the animation. If we specify the animation duration as 5 seconds, changes in the CSS defined states will need to be completed within ive seconds.
animation-delay
Similar to the delay property in transition, the animation-delay feature will delay
the animation by the time period specified.
animation-timing-function
Similar to the timing function, the animation-timing-function property decides the speed of transition. It behaves the same way as the transition timing function that we have seen earlier.
animation-iteration-count
We can decide the number of iteration carried out in the animation phase using the animation-iteration-count property. Setting this property to infinite will mean that the animation will never stop.
animation-direction
We can decide the direction of the animation using the animation-direction property. We can use values, such as reverse, and alternate to define the direction of the element to be animated.
animation-play-state
Using the animation-play-state feature, we can determine whether the animation would be running or paused accordingly.
Now that we had a look at these properties, we will now incorporate some of these properties in a code and understand the functionality in a better way. Hence, to gain a practical insight, let's look at the following code:
<!DOCTYPE html>
<html>
<head>
<style> div:hover {
width:200px; height:100px; border:2px dotted; border-radius:5px; border-color: navy; background:red; position:relative; animation:fstrdt 5s;
-webkit-animation:fstrdt 5s; /* Safari and Chrome */ animation-iteration-count:3;
animation-direction:alternate; animation-play-state:running;
-webkit-animation-iteration-count:3;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
@keyframes fstrdt {
0% {background:lime; left:0px; top:0px;} 25% {background:pink; left:300px; top:0px;}
50% {background:yellow; left:300px; top:300px;} 75% {background:silver; left:0px; top:300px;} 100% {background:lime; left:0px; top:0px;}
}
@-webkit-keyframes fstrdt {
0% {background:lime; left:0px; top:0px;} 25% {background:pink; left:300px; top:0px;}
50% {background:yellow; left:300px; top:300px;} 75% {background:silver; left:0px; top:300px;} 100% {background:lime; left:0px; top:0px;}
}
</style>
</head>
<body>
<br>
<div> fstrdT : Always finding a way </div>
</body>
</html>
We have used –webkit as the preix in the preceding example, as we are executing the code in Google Chrome. Please use the –moz prefix for Firefox and –o- for Opera. At the time of writing, Internet Explorer 10 supports this feature whereas the previous versions of IE do not support it.
This code when executed will have three iterations as defined in the code. After three iterations, the animation will stop automatically. The direction is alternate, as a result of which the animation would be in a different direction after the first iteration. The play state doesn't include any pauses and hence the element will be moving constantly. We have used the hover command and the animation would work once we hover over the div element. We have also defined the percentage in keyframes. Hence, the transition will take place as per the colors mentioned with respect to the position set in terms of percentage.
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<style> body {
background:#000; color:#fff;
}
#trigger { width:100px; height:100px; position:absolute; top:50%;
margin:-50px 0 0 -50px; left:50%;
background: black; border-radius:50px;
/*set the animation*/
/*[animation name] [animation duration] [animation timing function] [animation delay] [animation iterations count] [animation direction]*/
animation: glowness 5s linear 0s 5 alternate;
-moz-animation: glowness 5s linear 0s 5 alternate;
/* Firefox */
-webkit-animation: glowness 5s linear 0s 5 alternate;
/* Safari and Chrome */
-o-animation: glowness 5s linear 0s 5 alternate;
/* Opera */
-ms-animation: glowness 5s linear 0s 5 alternate;
/* IE10 */
}
#trigger:hover {
animation-play-state: paused;
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
-o-animation-play-state: paused;
-ms-animation-play-state: paused;
}
/*animation keyframes*/
@keyframes glowness {
|
|
0% |
{box-shadow:
|
0 |
0 |
80px orange;} |
25% |
{box-shadow:
|
0 |
0 |
150px red;} |
|
50% |
{box-shadow:
|
0 |
0 |
70px pink;} |
|
75% |
{box-shadow:
|
0 |
0 |
50px violet;} |
|
100% |
{box-shadow:
|
0 |
0 |
100px yellow;} |
|
} |
|
|
|
|
|
@-moz-keyframes glowness /* Firefox */ {
|
|
0% |
{box-shadow:
|
0 |
0 |
80px orange;} |
25% |
{box-shadow:
|
0 |
0 |
150px red;} |
|
50% |
{box-shadow:
|
0 |
0 |
70px pink;} |
|
75% |
{box-shadow:
|
0 |
0 |
50px violet;} |
|
100% |
{box-shadow:
|
0 |
0 |
100px yellow;} |
|
} |
|
|
|
|
|
@-webkit-keyframes glowness /* Safari and Chrome */ { 0% {box-shadow: 0 0 80px orange;}
|
|
25% |
{box-shadow:
|
0 |
0 |
150px red;} |
50% |
{box-shadow:
|
0 |
0 |
70px pink;} |
|
75% |
{box-shadow:
|
0 |
0 |
50px violet;} |
|
100% |
{box-shadow:
|
0 |
0 |
100px yellow;} |
|
} |
|
|
|
|
|
@-o-keyframes glowness /* Opera */ {
|
|
0% |
{box-shadow:
|
0 |
0 |
80px orange;} |
25% |
{box-shadow:
|
0 |
0 |
150px red;} |
|
50% |
{box-shadow:
|
0 |
0 |
70px pink;} |
|
75% |
{box-shadow:
|
0 |
0 |
50px violet;} |
|
100% |
{box-shadow:
|
0 |
0 |
100px yellow;} |
|
} |
|
|
|
|
|
@-ms-keyframes glowness /* IE10 */ { 0% {box-shadow: 0 0 20px green;}
25% {box-shadow: 0 0 150px red;}
50% {box-shadow: 0 0 70px pink;}
75% {box-shadow: 0 0 50px violet;}
100% {box-shadow: 0 0 100px yellow;}
}
</style>
<script>
// animation started (buggy on firefox)
$('#trigger').on('animationstart mozanimationstart webkitAnimationStart oAnimationStart
msanimationstart',function() {
$('p').html('animation started');
})
// animation paused
$('#trigger').on('mouseover',function() {
$('p').html('animation paused');
})
// animation re-started
$('#trigger').on('mouseout',function() {
$('p').html('animation re-started');
})
// animation ended
$('#trigger').on('animationend mozanimationend webkitAnimationEnd oAnimationEnd
msanimationend',function() {
$('p').html('animation ended');
})
//iteration count var i = 0;
$('#trigger').on('animationiteration mozanimationiteration webkitAnimationIteration oAnimationIteration
msanimationiteration',function() { i++;
$('p').html('animation iteration='+i);
})
</script>
</head>
<body>
<div id = "trigger"></div>
</body>
</html>
OUTPOUT:
We have used –webkit as the prefix in the preceding example, as we are executing the code in Google Chrome. Please use the –moz prefix for Firefox and –o- for Opera. Comments are added in the code so that we can understand it easily.
Apart from HTML5 and CSS3, we have used a bit of jQuery. Let's go through the animation part of the code to understand it better. In the CSS3 styles, we have mentioned the animation direction as alternate, as a result of which the animation would be in a different direction after the irst iteration.
We have used the hover property. In this code, whenever we hover over the
object, the animation is paused. We have also defined the glowness of the object in keyframes. We have also mentioned how the color change and defined a box-shadow attribute for the animation in keyframes.
We have deined the script tag, in which we have included the JavaScript and jQuery code.
We have used the trigger attribute. The trigger() method triggers a particular event and the default behavior of an event with regards to the chosen elements. We have used the mouseover and mouseout properties. The mouseover and mouseout event ires when the user moves the mouse pointer over an element and out of
an element respectively. We have used those events in conjunction with the start, end, and pausing of the animation. Therefore, we see how we can create complex animations using CSS3.
We can work wonders with animation and it will get better once it is accepted as a
standard. Till then, we have to do with the vendor prefix.